<!--
 * @Author: zhuxiaoyi
 * @Date: 2024-01-09 10:50:36
 * @LastEditor: zhuxiaoyi
 * @LastEditTime: 2024-08-09 11:03:44
 * @Description: 
-->
<template>
    <el-dialog :modelValue="props.typeDia.visible" title="修改类型" width="30%" center :before-close="closeaddTypeDiaDialog"
        @open="dialogOpenHandler">
        <el-row>
            <el-col :span="24">
                <div class="add-type-card" :style="`height:${200}px;over-flow:auto`">
                    <el-form ref="typeFormRef" style="max-width: 600px" :model="typeForm" :rules="rules"
                        label-width="auto" class="" :size="'small'" status-icon>
                        <el-form-item label="类型名称" prop="name">
                            <el-input placeholder="请输入类型名称" v-model="typeForm.name" />
                        </el-form-item>
                        <el-form-item label="类型描述" prop="des">
                            <el-input v-model="typeForm.des" type="textarea" maxlength="500" placeholder="请输入类型描述"
                                show-word-limit rows="5" />
                        </el-form-item>
                    </el-form>
                </div>
            </el-col>
        </el-row>
        <template #footer>
            <el-form-item style="width: 100%;">
                <div style=" width: 100%; display: flex;justify-content: center;">
                    <el-button size="small" type="primary" @click="submitForm(typeFormRef)">
                        确定
                    </el-button>
                    <el-button size="small" @click="resetForm(typeFormRef)">取消</el-button>
                </div>
            </el-form-item>
        </template>
    </el-dialog>
</template>
<script setup lang="ts">
import { defineComponent, reactive, computed, ref, toRefs, onMounted, watch } from "vue";
import HttpService from "@/api/api";
import { ElMessage, ElMessageBox, } from "element-plus";
import type { ComponentSize, FormInstance, FormRules } from 'element-plus'
import * as _ from "lodash";

const props = defineProps({
    typeDia: Object
});

const emits = defineEmits(['dialogSubmit', 'closeaddTypeDiaDialog']);

const typeFormRef = ref<FormInstance>()
let typeForm = reactive({
    name: '',
    des: "",
    id:""
})
const rules = reactive({
    name: [
        { required: true, message: '请输入类型名称', trigger: 'blur' },
        { min: 1, max: 50, message: '长度为1-50个字符', trigger: 'blur' },
    ],
    des: [
        { required: false, message: '请输入类型描述', trigger: 'blur' },
        { min: 1, max: 500, message: '长度为1-500个字符', trigger: 'blur' },
    ],
})

const dialogOpenHandler = function () {
    typeForm.name = props.typeDia.name
    typeForm.des = props.typeDia.des
    typeForm.id = props.typeDia.id
}

const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            emits('dialogSubmit', typeForm)
            closeaddTypeDiaDialog()
            resetForm(formEl)
        } else {
            console.log('error submit!', fields)
        }
    })
}

const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
    closeaddTypeDiaDialog()
}

var view = reactive({
    height: window.innerHeight,
});

const closeaddTypeDiaDialog = function () {
    emits('closeaddTypeDiaDialog')
}

onMounted(() => {

});
</script>
<style lang="scss" scoped>
.search-container {
    display: flex;
    justify-content: space-between
}
</style>
<style lang="scss">
.file-card {
    overflow: auto;

    .el-table {
        tr {
            cursor: pointer;
        }

        .el-table__body tr.current-row> {
            td.el-table__cell {
                background-color: #0b0c0c75;
                color: #409EFF;
            }
        }
    }
}
</style>